<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/meta.jsp" %>
<title>VTC - Holistic category - HPP</title>
<%@ include file="/common/css_js.jsp"%>
<script type="text/javascript">

function selectCard(card){
	var nodeId = document.getElementById("categoryNodeId").value;
	var type = document.getElementById("categoryNodeType").value;
	var categoryId = document.getElementById("categoryId").value;
	var treeType = document.getElementById("treeType").value;
	if(nodeId==null || nodeId==""){
		document.getElementById("errorMessage").innerHTML="Please fill in Category Node Info first!";
		return;
	}
	if(card=='node_card'){
		if(type=="Root")
			window.top.catForm.location="categoryNode!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		else if(type=="Branch")
			window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		else
			window.top.catForm.location="categoryLeaf!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}else if(card=='att_card'){
		window.top.catForm.location="categoryProgrammeAttribute!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}else if(card=='owner_card'){
		window.top.catForm.location="categoryOwner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}else if(card=='planner_card'){
		window.top.catForm.location="categoryPlanner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}
}
	$(document).ready(function() {
		$("#categoryNodeForm").validate({
			rules: {
					"categoryNode.name": {
						required: true,
						maxlength:100
					}
			}
		});
	});
	
	function turnToBranchPage() {
		$("#categoryNodeForm").attr('action',
				'categoryBranch!createBranch.action?no-decorate=0');
		$("#categoryNodeForm").submit();
	}
	function turnToLeafPage(){
		$("#categoryNodeForm").attr('action',
		'categoryLeaf!createLeaf.action?no-decorate=0');
		$("#categoryNodeForm").submit();
	}
	function saveCategoryNode(){
	
		var isDisciplineViewCB = $("#isDisciplineViewCB");
		if (isDisciplineViewCB.attr("checked") == "checked" || isDisciplineViewCB.attr("checked") == true) {
			$("#isDisciplineView").attr("value",1);
		}else {
			$("#isDisciplineView").attr("value",0);
		}
		var stt = document.getElementsByName("sourceTypeTemp");
		var itt = document.getElementsByName("inputTypeTemp");
		for(var s=0;s<stt.length;s++){
			if(stt[s].checked == true){
				document.getElementById("sourceType").value = stt[s].value;
				break;
			}
		}
		for(var i=0;i<itt.length;i++){
			if(itt[i].checked == true){
				document.getElementById("inputType").value = itt[i].value;
				break;
			}
		}
		
		
		var type = document.getElementById("categoryNodeType").value;
		if(type=="Root"){
			$("#categoryNodeForm").attr('action','categoryNode!save.action?no-decorate=0');
			$("#categoryNodeForm").submit();
			var categoryId = document.getElementById("categoryId").value;
			window.top.catTree.location = "category!loadCategoryTree.action?no-decorate=0&categoryId="+categoryId;	
		}else{
			var name = document.getElementById("name").value;
			var parentId = document.getElementById("parentId").value;
			var nodeId = document.getElementById("categoryNodeId").value;
			if(parentId==null || parentId==''){
				if(type=="Branch"){
					$("#categoryNodeForm").attr('action','categoryBranch!save.action?no-decorate=0');
				}else if(type=='Leaf'){
					$("#categoryNodeForm").attr('action','categoryLeaf!save.action?no-decorate=0');
				}
				$("#categoryNodeForm").submit();
				var categoryId = document.getElementById("categoryId").value;
				window.top.catTree.location = "category!loadCategoryTree.action?no-decorate=0&categoryId="+categoryId;	
				return;
			}
			$.ajax({
				url : "categoryBranch!ajaxValidateNodeName.action?no-decorate=0&categoryNode.name="+name+"&parentId="+parentId+"&categoryNode.id="+nodeId,
				cache : true,
				dataType : "text",
				async : false,
				success : function(data) {
					if(data=="success"){
						var isInheritParentNodeCB  = $("#isInheritParentNodeCB");
						if (isInheritParentNodeCB.attr("checked") == "checked" || isInheritParentNodeCB.attr("checked") == true) {
							$("#isInheritParentNode").val(1);
						}else{
							$("#isInheritParentNode").val(0);
						}
						if(type=="Branch"){
							$("#categoryNodeForm").attr('action','categoryBranch!save.action?no-decorate=0');
						}else if(type=='Leaf'){
							$("#categoryNodeForm").attr('action','categoryLeaf!save.action?no-decorate=0');
						}
						$("#categoryNodeForm").submit();
						var categoryId = document.getElementById("categoryId").value;
						window.top.catTree.location = "category!loadCategoryTree.action?no-decorate=0&categoryId="+categoryId;	
					}else{
						document.getElementById("errorMessage").innerHTML=data;
					}
				},
				error : function(data) {}
			});
			
			
		}
			
	}
	
	function deleteNode(){
		var type = document.getElementById("categoryNodeType").value;
		var nodeId = document.getElementById("categoryNodeId").value;
		var parentId = document.getElementById("parentId").value;
		var parentNodeType = document.getElementById("parentNodeType").value;
		var categoryId = document.getElementById("categoryId").value;
		if(type=="Root"){
			window.top.catForm.location="categoryNode!delete.action?no-decorate=0&categoryNodeId="+nodeId;
		}else if(type=="Branch"){
			
			$.ajax({
				url : "categoryBranch!deleteBranch.action?no-decorate=0&categoryNodeId="+nodeId,
				cache : true,
				dataType : "text",
				async : false,
				success : function(data) {
					if(data=="success"){
						window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+parentId+"&categoryId="+categoryId;
						if(parentNodeType=="Root")
							window.top.catForm.location="categoryNode!list.action?no-decorate=0&categoryNodeId="+parentId+"&categoryId="+categoryId;
						else
							window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+parentId+"&categoryId="+categoryId;
					}else{
						document.getElementById("errorMessage").innerHTML=data;
					}
				},
				error : function(data) {}
			});
			
			//window.top.catForm.location="categoryBranch!delete.action?no-decorate=0&categoryNodeId="+nodeId;
			
		}else{
			$.ajax({
				url : "categoryLeaf!deleteLeaf.action?no-decorate=0&categoryNodeId="+nodeId,
				cache : true,
				dataType : "text",
				async : false,
				success : function(data) {
					if(data=="success"){
						window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+parentId+"&categoryId="+categoryId;
					}else{
						document.getElementById("errorMessage").innerHTML=data;
					}
				},
				error : function(data) {
					alert("===");
				}
			});
			//window.top.catForm.location="categoryLeaf!delete.action?no-decorate=0&categoryNodeId="+nodeId;
			//window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+parentId+"&categoryId="+categoryId;
		}
		var categoryId = document.getElementById("categoryId").value;
		window.top.catTree.location = "category!loadCategoryTree.action?no-decorate=0&categoryId="+categoryId;	
	}

	function isDigit()
	{
	   var key = window.event.keyCode;   
	    if(key < 48 || key > 57){   
	       window.event.keyCode = 0 ;
	    }
	}
</script>
</head>
<body>
	<div class="bodyBlank">
<div class="wTab">
			<table id="wMu" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td class="item1" id="itemA"><a href="javascript:selectCard('node_card');">Category
							Info.</a>
					</td>
					<s:if test="%{categoryNodeType=='Leaf'}">
					<td class="item1" id="itemB"><a
						href="javascript:selectCard('att_card');">Programme Groups</a>
					</td>
					</s:if>
					<s:if test="%{treeType=='Root'}">
						<td class="item1" id="itemC"><a
							href="javascript:selectCard('owner_card');">Owner</a>
						</td>
					</s:if>
					<s:if test="%{treeType!='Root'}">
					<td class="item1" id="itemD"><a
						href="javascript:selectCard('planner_card');">Planner</a>
					</td>
					</s:if>
				</tr>
			</table>
		</div>
		<script>
			selectTab("wMu", "itemA");
		</script>
	<div class="form2">
		  <s:actionerror/>
	  <s:fielderror id="fielderror" />
	  <s:actionmessage/> 
		<label  id="errorMessage" style="color: red;"></label>
	<form id="categoryNodeForm" name="categoryNodeForm" method="post">
			<table border="0" cellspacing="0" cellpadding="0">
				<s:hidden id="categoryId" name="categoryId"
					value="%{categoryId}"></s:hidden>
				<s:hidden id="parentId" name="parentId" value="%{parentId}"/>
				<s:hidden id="level2status" name="categoryNode.level2status" value="%{categoryNode.level2status}"/>
				<s:hidden name="categoryNodeId" id="categoryNodeId" value="%{categoryNodeId}"></s:hidden>
				<s:hidden name="categoryNodeType" id="categoryNodeType" value="%{categoryNodeType}"/>
				<s:hidden name="parentNodeType" id="parentNodeType" value="%{parentNodeType}"/>
				<s:hidden name="treeType" id="treeType" value="%{treeType}"/>
				<tr>
					<td class="sep"><img src="../images/spacer.gif"
						style="width: 230px" />
					</td>
					<td class="sep sep2"><img src="../images/spacer.gif" />
					</td>
				</tr>
				<s:if test="%{treeType!='Root' && (categoryNodeType=='Root' ||(categoryNodeType=='Leaf' && (parentId==null || parentId=='' )))}">
				<tr id="nodeName_tr">
					<td colspan="2"><label class="fLabel">Node Name </label>
						<div class="fField">
							<s:textfield id="name" name="categoryNode.name" cssStyle="width:420px" readonly="true"  cssClass="inputText required"></s:textfield>
						</div>
					</td>
				</tr>
				</s:if>
				<s:if test="%{categoryNodeType!='Root' && parentId!=null && parentId!='' }">
				<tr id="nodeName_tr">
					<td colspan="2"><label class="fLabel">Node Name </label>
						<div class="fField">
							<s:textfield id="name" name="categoryNode.name" cssStyle="width:420px"  cssClass="inputText required"></s:textfield>
						</div>
					</td>
				</tr>
				</s:if>
				
				<s:if test="%{categoryNodeType=='Leaf'}">
				<tr id="bureau_tr">
					<td><label class="fLabel">Bureau</label>
						<div class="fField">
							 <s:select cssClass="required" cssStyle="width:155px" name="categoryNode.bureau" 
	            		  list="paramService.bureauList" listKey="code" listValue="desc"
	            		  headerKey="" headerValue="-- Select --">
	            		</s:select>  
					</div>
				</td>
				<td><label class="fLabel">Funding Mode </label>
				<div class="fField">
					<s:select cssClass="required" cssStyle="width:155px" name="categoryNode.fundingMode" 
	            		  id="foundingMode"
	            		  list="paramService.fundingModeList" listKey="code" listValue="desc"
	            		  headerKey="" headerValue="-- Select --">
	            </s:select>  
					</div>
				</td>
			</tr>
			</s:if>
			
			<tr>
			
			<tr>
				<td><label class="fLabel"> Node Type </label>
					<div class="fField" style="margin-bottom: 5px;">
					<s:if test="%{categoryNodeType!='Leaf'}">
						<label>Branch</label>
					</s:if>
					<s:else>
						<label>Leaf</label>
					</s:else>
					</div></td>
				<td><label class="fLabel"> Set Discipline Target  </label> <s:checkbox
						id="isDisciplineViewCB" value="%{categoryNode.isDisciplineView}"
						name="isDisciplineViewCB"  onclick="changeDisciplineView()"></s:checkbox>Discipline Target  <s:hidden
								id="isDisciplineView" name="categoryNode.isDisciplineView"></s:hidden>
				</td>
			</tr>
			
			<s:if test="%{categoryNodeType!='Root' && parentId!=null && parentId!='' }">
			<tr> 
				<td colspan="2">
					<s:checkbox
							id="isInheritParentNodeCB" value="%{categoryNode.isInheritParentNode}"
							name="isInheritParentNodeCB" onclick="inheritParentNode()"></s:checkbox>Inherit Property from Parent Node 
							<s:hidden
								id="isInheritParentNode" name="categoryNode.isInheritParentNode"></s:hidden>
							<label class="noteBlue"> <br/>"(Planning Input, Sources of Enrolment Figures, Conversion Factor)". Not include Owner & Planner Info</label>
				</td>
			</tr>
			</s:if>
			
			<tr>
				<td colspan="2"><label class="fLabel">Planning Input
				</label>
					<div class="fField" style="margin-bottom: 5px;">
						<s:radio name="inputTypeTemp" id="inputTypeTemp"
							list="inputTypeMap" listKey="key" listValue="value" value="%{categoryNode.inputType}"></s:radio>
						<s:hidden id="inputType" name="categoryNode.inputType"/>
					</div></td>
			</tr>
			<tr>
				<td colspan="2"><label class="fLabel"> Sources of Enrolment Figures </label>
					<div class="fField" style="margin-bottom: 5px;">
						<s:radio name="sourceTypeTemp" id="sourceTypeTemp" 
							list="sourceTypeMap" listKey="key" listValue="value" value="%{categoryNode.sourceType}"></s:radio>
						<s:hidden id="sourceType" name="categoryNode.sourceType"/>	
					</div></td>
			</tr>
			<script>
				var id = "<s:property value='categoryNodeId'/>";
				if(id==null || id==""){
					document.getElementsByName('inputTypeTemp')[0].checked = true;
					document.getElementsByName('sourceTypeTemp')[0].checked = true;
				}
			</script>
		</table>
		<tr>
			<td colspan="2"><label class="fLabel">Remarks </label>
				<div class="fField">
					<s:textfield id="remarks" name="categoryNode.remarks"
						cssClass="inputText" cssStyle="width:420px" theme="simple" maxLength="4000" ></s:textfield>
				</div>
			</td>
		</tr>

		<div class="btnSet btnSetTypeA">
				<div class="left">
					<div class="button">
						<div class="left">
							<div class="right">
							
				<s:hidden name="categoryNode.id" id="categoryNode.id" value="%{categoryNode.id}"/>
							<security:authorize  access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
								<input class="inputButton" type="button" id="" name=""
									value="Save" onclick="saveCategoryNode()" />
									</security:authorize>
							</div>
						</div>
					</div>
					<s:if test="%{categoryNodeType!='Root' && categoryNode.id!=null && categoryNode.id!='' && parentId!=null && parentId!=''}">
						<div class="button">
							<div class="left">
								<div class="right">
								<security:authorize access="hasRole('PLANNING_EXERCISE_DELETE')" >
									<input class="inputButton" type="button" id="" name=""
										value="<s:text name='common.btn.delete'/>"
										onclick="if(confirm('Confirm to delete this record? All child records under this node will also be deleted.')){deleteNode()}" />
								</security:authorize>
								</div>
							</div>
						</div>
					</s:if>
<!-- 					<script type="text/javascript">alert("111");alert("<s:property value='hasOwners'/>");</script> -->
					<security:authorize  access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
					<s:if test="%{!hasOwners && categoryNodeType!='Leaf' && !ownerNodeIsLeaf &&  categoryNode.id!=null && categoryNode.id!=''}">
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="add_branch" name=""
										value="Add Branch" onclick="turnToBranchPage()" />
								</div>
							</div>
						</div>
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="add_leaf" name=""
										value="Add Leaf" onclick="turnToLeafPage()" />
								</div>
							</div>
						</div>
					</s:if>
					<s:if test="%{categoryNodeType!='Root' && categoryNode.id!=null && categoryNode.id!='' && parentId!=null && parentId!=''}">
					<div class="button" >
			            <div class="left" >
			              <div class="right" >
			                <input class="inputButton" type="button" id="" name="" 
			                	value="Move To" onclick="window.top.popup(event, 'categoryBranch!goToMoveToPage.action?no-decorate=0&categoryId=<s:property value="categoryId"/>&categoryNodeId=<s:property value="categoryNodeId"/>&categoryNodeType=<s:property value="categoryNodeType"/>', 'width:400;height:500');"/>
			              </div>
			            </div>
		          </div>
		          </s:if>
		          </security:authorize>
				</div>
			</div>
		</form>
	<script>

	function inheritParentNode(){
		var ch = document.getElementById("isInheritParentNodeCB").checked;
		var stt = document.getElementsByName("sourceTypeTemp");
		var itt = document.getElementsByName("inputTypeTemp");
		
		if(ch == false){
			for(var s=0;s<stt.length;s++){
				stt[s].disabled=false;
			}
			stt[0].checked = true;
			for(var i=0;i<itt.length;i++){
				itt[i].disabled=false;
			}
			itt[0].checked = true;
			
		}else{
			var parentId = document.getElementById("parentId").value;
			$.ajax({
				url : "categoryBranch!inheritParentNode.action?no-decorate=0&parentId="+ parentId,
				cache : true,
				dataType : "json",
				async : false,
				success : function(data) {
					for(var s=0;s<stt.length;s++){
						stt[s].disabled=true;
						if(stt[s].value==data.sourceType)
							stt[s].checked = true;
					}
					for(var i=0;i<itt.length;i++){
						itt[i].disabled=true;
						if(itt[i].value==data.inputType)
							itt[i].checked = true;
					}
				},
				error : function(data) {
					//alert(data);
				}
			});
		}
	}
	if("<s:property value='categoryNode.isInheritParentNode'/>"=="1"){
		document.getElementById("isInheritParentNodeCB").checked = true;
		inheritParentNode();
	}

	function checkLevel1Endorsed(){
		var type = document.getElementById("categoryNodeType").value;
		var categoryId = document.getElementById("categoryId").value;
		$.ajax({
			url : "category!checkLevel1Endorsed.action?no-decorate=0&categoryId="+categoryId,
			cache : true,
			dataType : "text",
			async : false,
			success : function(data) {
				if(data=="true"){
					if(type="Root"){
						$("input[type='button']").attr("disabled", "true");
					}
				}
			},
			error : function(data) {
			}
		});
	}
	checkLevel1Endorsed();
	
	var currentView = "<s:property value='categoryNode.isDisciplineView'/>";
	function changeDisciplineView(){
		var parentId = document.getElementById("parentId").value;
		$.ajax({
			url : "categoryBranch!ajaxCheckDisciplineView.action?no-decorate=0&parentId="+parentId,
			cache : true,
			dataType : "text",
			async : false,
			success : function(data) {
				if(data=="true"){
					document.getElementById("isDisciplineViewCB").disabled=true;
				}
			},
			error : function(data) {
			}
		});
	}
	//if(currentView=="0"){
		changeDisciplineView();
	//}
	</script>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>
